import React, { useState, useEffect } from "react";
const TabMenu = [
  "System Information",
  " Configuration Management",
  " Plugin Management",
  "Display Templates",
];
interface TabSelfProps {
  onChange?: (index: number) => void; // 定义回调函数属性
}
const TabSelf: React.FC<TabSelfProps> = ({ onChange }) => {
  const [index, setIndex] = useState(0);
  useEffect(() => {
    setTimeout(() => {
      const element = document.getElementById(
        "tabSelf-active-bg"
      ) as HTMLDivElement | null;
      const activityDom = document.getElementsByClassName(
        "tabSelf-active"
      )[0] as HTMLDivElement | undefined;
      const tabSelfTtemDom = document.getElementsByClassName(
        "tabSelf-item"
      )[0] as HTMLDivElement | undefined;
      if (activityDom && element && activityDom && tabSelfTtemDom) {
        element.style.width = activityDom?.offsetWidth + 15 + "px";
        element.style.transform = `translateX(${
          activityDom.getBoundingClientRect().left -
          8 -
          tabSelfTtemDom.getBoundingClientRect().left +
          "px"
        })`;
      } // const
    }, 100);
    if (onChange) {
      onChange(index); // 传递 index 到父组件
    }
  }, [index]);

  return (
    <div className="tabSelf">
      {TabMenu.map((vo: any, key) => (
        <div
          key={key}
          onClick={() => setIndex(key)}
          className={
            index == key ? "tabSelf-item tabSelf-active" : "tabSelf-item"
          }
        >
          {vo}
        </div>
      ))}
      <div onClick={() => setIndex(4)} id="tabSelf-active-bg"></div>
    </div>
  );
};

export default TabSelf;
